<template>
    <div id="BlogsContent">
        <div class="BlogsOption">
            <ul>
                <router-link class="li" tag='li' :to="{path:'/Blogs/total?sort=popular'}" active-class="myactive" >全部</router-link>
                <router-link class="li" tag='li' :to="{path:'/Blogs/front?sort=popular'}" active-class="myactive">前端</router-link>
                <router-link class="li" tag='li' :to="{path:'/Blogs/back?sort=popular'}" active-class="myactive">后端</router-link>
                <router-link class="li" tag='li' :to="{path:'/Blogs/android?sort=popular'}" active-class="myactive">Android</router-link>
                <router-link class="li" tag='li' :to="{path:'/Blogs/ios?sort=popular'}" active-class="myactive">IOS</router-link>
                <router-link class="li" tag='li' :to="{path:'/Blogs/artificial?sort=popular'}" active-class="myactive">人工智能</router-link>
                <router-link class="li" tag='li' :to="{path:'/Blogs/life?sort=popular'}" active-class="myactive">代码人生</router-link>
            </ul>
        </div>
        <div class='BAC'>
            <router-view></router-view>
        </div>
        
    </div>
</template>
<script>
export default {
    watch: {
        $route(to,from){
            // this.$route.go(0);
        }
    },
}
</script>
<style>

#BlogsContent{
    position: relative;
}
#BlogsContent .BlogsContents{
    position: relative;
    
    width: 1200px;
    left: 50%;
    transform: translateX(-50%);
    /* margin-top:15px; */
    /* padding-top: 15px; */
    /* padding-left:20px; */
    /* padding-right:20px; */
    box-sizing: border-box;
}
#BlogsContent .BCA{
    width: 900px;
    background-color: white;
    padding: 20px;
    margin:20px 0;
}
#BlogsContent .BlogsOption{
    position: relative;
    width: 100%;
    height: 50px;
    z-index: 101;
    margin-top: 60px;
    background-color: white;
    border-top: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 2px 2px rgba(0, 0, 0, .04), 0 0 2px rgba(0, 0, 0, .04)
}
#BlogsContent .BlogsOption ul{
    position: relative;
    width: 1200px;
    left: 50%;
    transform: translateX(-50%);
    padding:0 10px;
    box-sizing: border-box;
}
#BlogsContent .BlogsOption li{
    margin:0 20px;
    line-height: 50px;
    float: left;
    list-style: none;
    cursor: pointer;
}
#BlogsContent .BlogsOption .li{
    color: rgb(137,142,147);
    transition: all .5s;
}
#BlogsContent .BlogsOption .myactive{
    color: rgb(0,127,255);
    transition: all .5s;
}
#BlogsContent .BlogsOption .li:hover{
    color: rgb(0,127,255)
}
#BlogsContent .BlogsContents ul{
    /* margin-top: 20px; */
    display: inline-block;
    width: 900px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    z-index: -1;
    margin-bottom: 10px;
}
#BlogsContent .BlogsContents ul li{
    float: left;
    list-style: none;
    margin: 0 2px;
    padding:15px 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
}
#BlogsContent .BlogsContents  ul .li{
    color: rgb(0,162,255);
    transition: background-color .5s,color .3s;
}
#BlogsContent .BlogsContents  ul .li:hover{
    background-color: rgb(238,238,238);
}
#BlogsContent .BlogsContents  ul .myactive{
    color: #555;
    border: 1px solid #ddd;
    border-bottom:1px solid transparent;
    
}
#BlogsContent .BlogsContents  ul .myactive:hover{
    background-color: white;    
}
</style>
